import React, { Component } from 'react'
import {Navigation} from './Navigation'
import {Main} from './Main'
import {Account} from './Account'
import {Login} from './Login'
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  state = {
      user: null,
      machine: null,
      token: '',
      selected: 'PAGE_MAIN'
  }

  getCurrentPage() {
      if(this.state.user === null || this.state.selected === 'PAGE_MY') {
          return (<Login state={this.state} setState={this.setState.bind(this)} />)
      } else if(this.state.selected === 'PAGE_WALLET') {
          return (<Account state={this.state} setState={this.setState.bind(this)} />)
      } else {
          return (<Main state={this.state} setState={this.setState.bind(this)} />)
      }
  }

  render() {
    return (
        <div>
          <Navigation state={this.state} setState={this.setState.bind(this)} />
            {this.getCurrentPage()}
        </div>
    )
  }
}

export default App;
